<template>
  <div
    v-bind="$attrs"
    class="r-info-card-container"
    :class="{ 'info-card--border': props.border }"
    :style="{ height: props.height }"
  >
    <div v-show="props.title" class="info-card__header">
      <div class="info-card__header-title">{{ props.title }}</div>
    </div>
    <div class="info-card__body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  title: String,
  border: { type: Boolean, default: true },
  height: { type: [String, Number], default: '' }
});
</script>

<style lang="scss" scoped>
.r-info-card-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  color: var(--text-color);
  background-color: var(--bg-color);

  &.info-card--border {
    border: 1px solid var(--border-color);
  }

  .info-card__header {
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
  }

  .info-card__body {
    width: 100%;
    flex-grow: 1;
    min-height: 100px;
  }
}
</style>
